<template>
	<div v-if="showAll===1" class="content">
		<div class="progress">
			<div class="progress_bar">
				<div :style="{width:((activeIndex==0?1:activeIndex)/5*100)+'%'}" class="progress_bar_pb"></div>
			</div>
			<div class="progress_text">{{activeIndex==0?1:activeIndex}}/5</div>
		</div>
		<div class="main" v-show="activeIndex==0">
			<!-- <div class="main_l1">
				<div class="main_tips">受试者作答</div>
			</div> -->
			<div class="main_question">
				点击按钮，您将听到三种东西的名称，听完后请您重复一遍并且记住他们，过一会儿还会问您。
			</div>
			<div class="voiceBox">
				<audio
					:src="voiceSrc"
					controls="controls"
					ref="audio"
					@ended="overAudio"
				  >Your browser does not support the audio element.</audio>
				<div v-show="playingVoice===false" v-on:click="playVoice" class="playBtn">
					<img class="playBtn_bg" src="../../assets/playBtn.png" alt="">
					<div class="playBtn_text">{{playBtnText}}</div>
				</div>
				<div v-show="playingVoice===true" class="playBtn">
					<img class="playBtn_bg" src="../../assets/playingIcon.gif" alt="">
					<div class="playBtn_text">播放中</div>
				</div>
			</div>
			<div v-on:click="nextBtn" :style="{opacity:continueBtn===false?0.2:1}" class="continueBtn">
				继续测评
			</div>
		</div>
		<div class="main" v-show="activeIndex==1&&patientVersion==0">
			<div class="main_l1">
				<div class="main_tips main_tips2">工作人员判评</div>
			</div>
			<div class="main_question">
				<span>说出您刚才听到的三种东西</span>
				<img v-if="playingVoice==true" class="voice_icon" src="../../assets/voice_icon.gif" alt="">
				<img v-else v-on:click="touchVoiceIcon" class="voice_icon" src="../../assets/voice_icon.png" alt="">
			</div>
			<div class="main_reviewBox">
				<div class="main_reviewBox_title">
					<div class="main_reviewBox_title_l">词语名称</div>
					<div class="main_reviewBox_title_r">选项</div>
				</div>
				<div v-for="(item,index) in selectOptArr[questionArrIndex]" :key="index" class="main_reviewBox_line">
					<div class="main_reviewBox_line_title">{{item}}</div>
					<div v-on:click="choseBtn(i,index)" v-for="(t,i) in ['正确','错误']" :key="i" class="main_reviewBox_line_selectBtn" :class="selectArr1[index]==i?'main_reviewBox_line_selectBtn_active2':''">
						<div class="main_reviewBox_line_selectBtn_point"></div>
						{{t}}
					</div>
				</div>
			</div>
			<div v-on:click="nextBtn" class="continueBtn">
				确认提交
			</div>
		</div>
		<div class="main" v-show="activeIndex==1&&patientVersion==1">
			<!-- <div class="main_l1">
				<div class="main_tips">受试者作答</div>
			</div> -->
			<div class="main_question">
				<span>您刚才听到了哪些词语？</span>
				<img v-if="playingVoice==true" class="voice_icon" src="../../assets/voice_icon.gif" alt="">
				<img v-else v-on:click="touchVoiceIcon" class="voice_icon" src="../../assets/voice_icon.png" alt="">
			</div>
			<div class="patientVersion_MMSE_Box">
				<div v-on:click="patientChoseBtn(item)" v-for="(item,index) in patientSelectArr[questionArrIndex]" :key="index" class="patientVersion_MMSE_block" :class="patientActiveArr.indexOf(item)!=-1?'main_reviewBox_line_selectBtn_active':''">{{item}}</div>
			</div>
			<div v-on:click="nextBtn" class="continueBtn">
				确认提交
			</div>
		</div>
		<div class="main" v-show="activeIndex==2">
			<!-- <div class="main_l1">
				<div class="main_tips">受试者作答</div>
			</div> -->
			<div class="main_question">
				<span>现在是几月？</span>
				<img v-if="playingVoice==true" class="voice_icon" src="../../assets/voice_icon.gif" alt="">
				<img v-else v-on:click="touchVoiceIcon" class="voice_icon" src="../../assets/voice_icon.png" alt="">
			</div>
			<div class="main_selectBox">
				<div v-on:click="choseMonthWeek(index,0)" v-for="(item,index) in monthArr" :key="item" :class="monthWeek[0]==(index+1)?'main_reviewBox_line_selectBtn_active':''" class="main_selectBox_btn">{{item}}</div>
			</div>
		</div>
		<div class="main" v-show="activeIndex==3">
			<!-- <div class="main_l1">
				<div class="main_tips">受试者作答</div>
			</div> -->
			<div class="main_question">
				<span>今天是星期几？</span>
				<img v-if="playingVoice==true" class="voice_icon" src="../../assets/voice_icon.gif" alt="">
				<img v-else v-on:click="touchVoiceIcon" class="voice_icon" src="../../assets/voice_icon.png" alt="">
			</div>
			<div class="main_selectBox">
				<div v-on:click="choseMonthWeek(index,1)" v-for="(item,index) in weekArr" :key="item" :class="monthWeek[1]==(index+1)?'main_reviewBox_line_selectBtn_active':''" class="main_selectBox_btn">{{item}}</div>
			</div>
		</div>
		<div class="main" v-show="activeIndex==4">
			<!-- <div class="main_l1">
				<div class="main_tips">受试者作答</div>
			</div> -->
			<div class="main_question">
				<span>现在请您从{{countArr[countArrIndex][0]}}减去{{countArr[countArrIndex][1]}}，把答案填到相应的位置，得到的数字再减{{countArr[countArrIndex][1]}}。</span>
				<img v-if="playingVoice==true" class="voice_icon" src="../../assets/voice_icon.gif" alt="">
				<img v-else v-on:click="touchVoiceIcon" class="voice_icon" src="../../assets/voice_icon.png" alt="">
			</div>
			<!-- <transition name='fade'>
				<div v-show="showCounter==1" class="main_question2">
					<div class="main_question2_count">
					{{totalCounter}}	
					</div>
					=多少？
				</div>
			</transition> -->
			<div class="main_counter">
				<transition name='fade'>
					<div :style="showCounter<2?'':'opacity:0'" :class="showCounter==1?'main_countInput_active':''" class="main_countInput">
						<div class="main_countInput_pointBox">
							<div class="main_countInput_point"></div>
						</div>
						<div class="main_countInput_title">{{countArr[countArrIndex][0]}}-{{countArr[countArrIndex][1]}}=</div>
						<input type="text" maxlength="4" v-model="counterInput[0]" disabled="disabled" placeholder="请输入答案">
					</div>
				</transition>
				<transition name='fade'>
					<div :style="showCounter<3?'':'opacity:0'" :class="showCounter==2?'main_countInput_active':''" class="main_countInput">
						<div class="main_countInput_pointBox">
							<div class="main_countInput_point"></div>
						</div>
						<div class="main_countInput_title">继续减{{countArr[countArrIndex][1]}}=</div>
						<input type="text" maxlength="4" v-model="counterInput[1]" disabled="disabled" placeholder="请输入答案">
					</div>
				</transition>
				<transition name='fade'>
					<div :style="showCounter<4?'':'opacity:0'" :class="showCounter==3?'main_countInput_active':''" class="main_countInput">
						<div class="main_countInput_pointBox">
							<div class="main_countInput_point"></div>
						</div>
						<div class="main_countInput_title">继续减{{countArr[countArrIndex][1]}}=</div>
						<input type="text" maxlength="4" v-model="counterInput[2]" disabled="disabled" placeholder="请输入答案">
					</div>
				</transition>
				<transition name='fade'>
					<div :style="showCounter<5?'':'opacity:0'" :class="showCounter==4?'main_countInput_active':''" class="main_countInput">
						<div class="main_countInput_pointBox">
							<div class="main_countInput_point"></div>
						</div>
						<div class="main_countInput_title">继续减{{countArr[countArrIndex][1]}}=</div>
						<input type="text" maxlength="4" v-model="counterInput[3]" disabled="disabled" placeholder="请输入答案">
					</div>
				</transition>
				<transition name='fade'>
					<div :style="showCounter<6?'':'opacity:0'" :class="showCounter==5?'main_countInput_active':''" class="main_countInput">
						<div class="main_countInput_pointBox">
							<div class="main_countInput_point"></div>
						</div>
						<div class="main_countInput_title">继续减{{countArr[countArrIndex][1]}}=</div>
						<input type="text" maxlength="4" v-model="counterInput[4]" disabled="disabled" placeholder="请输入答案">
					</div>
				</transition>
				<div class="main_countBtnBox">
					<div v-on:click="counterBtn(1)" class="main_countBtn">1</div>
					<div v-on:click="counterBtn(2)" class="main_countBtn">2</div>
					<div v-on:click="counterBtn(3)" class="main_countBtn">3</div>
					<div v-on:click="counterBtn(4)" class="main_countBtn">4</div>
					<div v-on:click="counterBtn(5)" class="main_countBtn">5</div>
					<div v-on:click="counterDelBtn" class="main_countBtn_delBtn">删除</div>
				</div>
				<div class="main_countBtnBox">
					<div v-on:click="counterBtn(6)" class="main_countBtn">6</div>
					<div v-on:click="counterBtn(7)" class="main_countBtn">7</div>
					<div v-on:click="counterBtn(8)" class="main_countBtn">8</div>
					<div v-on:click="counterBtn(9)" class="main_countBtn">9</div>
					<div v-on:click="counterBtn(0)" class="main_countBtn">0</div>
					<div v-on:click="counterConfirmBtn" class="main_countBtn_confirmBtn">确定</div>
				</div>
			</div>
		</div>
		<div class="main" v-show="activeIndex==5&&patientVersion==0">
			<div class="main_l1">
				<div class="main_tips main_tips2">工作人员判评</div>
			</div>
			<div class="main_question">
				<span>说出您刚才听到的三种东西</span>
				<img v-if="playingVoice==true" class="voice_icon" src="../../assets/voice_icon.gif" alt="">
				<img v-else v-on:click="touchVoiceIcon" class="voice_icon" src="../../assets/voice_icon.png" alt="">
			</div>
			<div class="main_reviewBox">
				<div class="main_reviewBox_title">
					<div class="main_reviewBox_title_l">词语名称</div>
					<div class="main_reviewBox_title_r">选项</div>
				</div>
				<div v-for="(item,index) in selectOptArr[questionArrIndex]" :key="index" class="main_reviewBox_line">
					<div class="main_reviewBox_line_title">{{item}}</div>
					<div v-on:click="choseBtn2(i,index)" v-for="(t,i) in ['正确','错误']" :key="i" class="main_reviewBox_line_selectBtn" :class="selectArr2[index]==i?'main_reviewBox_line_selectBtn_active2':''">
						<div class="main_reviewBox_line_selectBtn_point"></div>
						{{t}}
					</div>
				</div>
			</div>
			<div v-on:click="nextBtn" class="continueBtn">
				确认提交
			</div>
		</div>
		<div class="main" v-show="activeIndex==5&&patientVersion==1">
			<!-- <div class="main_l1">
				<div class="main_tips">受试者作答</div>
			</div> -->
			<div class="main_question">
				<span>您刚才听到了哪些词语？</span>
				<img v-if="playingVoice==true" class="voice_icon" src="../../assets/voice_icon.gif" alt="">
				<img v-else v-on:click="touchVoiceIcon" class="voice_icon" src="../../assets/voice_icon.png" alt="">
			</div>
			<div class="patientVersion_MMSE_Box">
				<div v-on:click="patientChoseBtn(item)" v-for="(item,index) in patientSelectArr[questionArrIndex]" :key="index" class="patientVersion_MMSE_block" :class="patientActiveArr.indexOf(item)!=-1?'main_reviewBox_line_selectBtn_active':''">{{item}}</div>
			</div>
			<div v-on:click="nextBtn" class="continueBtn">
				确认提交
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	import { Dialog } from 'vant';
	import { Toast } from 'vant';
	Vue.use(Dialog);
	Vue.use(Toast);
	import api from "@/api";
	import Cookies from 'js-cookie';
	export default {
		components: { },
		name: 'mmse-main',
		data() {
			return {
				showAll:0,
				activeIndex:0,
				countArrIndex:0,
				questionArrIndex:0,
				voiceSrc:'',
				voiceSrc2:'',
				scaleId:301,
				patientVersion:0,
				continueBtn:false,
				playingVoice:false,
				firstPlay:true,
				showCounter:1,
				playBtnText:'点击播放',
				patientActiveArr:[],
				selectOptArr:[
					['皮球','国旗','树木'],
					['跳板','针线','花生'],
					['弹簧','香油','毛巾'],
					['螺丝','青草','冰箱'],
					['兰花','绷带','肥皂'],
					['棋盘','荷塘','蜡烛'],
				],
				patientSelectArr:[
					['皮球','国旗','大象','汽车','桌子','宝石','帐篷','靴子','树木'],
					['花生','海棠','木工','跳板','长裤','百合','针线','头巾','士兵'],
					['律师','香油','弹簧','手套','纽扣','毛巾','军人','西装','耳环'],
					['司机','螺丝','大衣','腊梅','青草','冰箱','棋盘','荷塘','蜡烛'],
					['牡丹','兰花','肥皂','荷花','绷带','衬衫','皮鞋','校长','玉米'],
					['狮子','棋盘','帐篷','蜡烛','旅馆','荷塘','房屋','钻石','公寓']
				],
				countArr:[
					[100,7],
					[99,6],
					[89,8],
					[98,7],
					[80,7],
					[79,6]
				],
				countArr2:[
					[38,6],
					[27,4]
				],
				monthArr:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
				weekArr:['星期一','星期二','星期三','星期四','星期五','星期六','星期日',],
				selectArr1:[null,null,null],
				trueSelectArr1:[null,null,null],
				selectArr2:[null,null,null],
				trueSelectArr2:[null,null,null],
				canChose:true,
				monthWeek:['',''],
				counterInput:['','','','',''],
				totalCounter:'',
				counterAnswer:[],
				startTime:new Date().getTime(),
				saving:false
			};
		},
		computed: {
			
		},
		async mounted() {
			this.patientVersion=Cookies.get('patientVersion');
			// this.patientVersion=1;
			this.countArrIndex=Math.floor(Math.random()*this.countArr.length);
			this.questionArrIndex=Math.floor(Math.random()*this.selectOptArr.length);
			
			this.totalCounter='请计算 '+this.countArr[this.countArrIndex][0]+'-'+this.countArr[this.countArrIndex][1];
			this.showAll=1;
			this.loadVoice();
		},
		methods: {
			touchVoiceIcon(){
				this.loadVoice().then(this.playVoice);
			},
			async loadVoice(){
				if(this.firstPlay==true){
					this.voiceSrc= require('../../assets/voice/miniMmse/word_voice_mmse_'+(this.questionArrIndex+1)+'.mp3')
					this.voiceSrc2= require('../../assets/voice/voice_mmse_'+(this.questionArrIndex+1)+'.mp3')
				}else{
					if(this.activeIndex<4){
						this.voiceSrc= require('../../assets/voice/miniMmse/mmse_'+(this.activeIndex)+'.mp3')
					}else if(this.activeIndex==4){
						this.voiceSrc= require('../../assets/voice/miniMmse/mmse_counter_'+(this.countArrIndex+1)+'.mp3')
					}else if(this.activeIndex==5){
						this.voiceSrc= require('../../assets/voice/miniMmse/mmse_1.mp3')
					}
				}
			},
			overAudio(){
				this.playingVoice=false;
				if(this.continueBtn===false){
					this.continueBtn=true;
				}
				if(this.firstPlay==true){
					this.firstPlay=false;
					this.voiceSrc=this.voiceSrc2;
				}
			},
			playVoice(){
				this.$refs.audio.play();
				this.playingVoice=true;
				this.playBtnText='再听一次'
			},
			nextBtn(){
				if(this.activeIndex==0&&this.continueBtn==false){
					Toast('请播放完整音频后继续')
					return;
				}
				if(this.activeIndex==1){
					if(this.patientVersion==0){
						if(this.selectArr1.indexOf(null)!=-1){
							Toast('请完整作答后提交')
							return
						}
					}else{
						if(this.patientActiveArr.length<3){
							Toast('请完整作答后提交')
							return
						}else{
							for(let i=0;i<this.patientActiveArr.length;i++){
								let index=this.selectOptArr[this.questionArrIndex].indexOf(this.patientActiveArr[i]);
								if(index!=-1){
									this.trueSelectArr1.splice(index,1,1);
								}
							}
							for(let k=0;k<this.trueSelectArr1.length;k++){
								let index=this.trueSelectArr1.indexOf(null);
								if(index!=-1){
									this.trueSelectArr1.splice(index,1,0);
								}
							}
							this.patientActiveArr=[];
						}
					}
					console.log(this.trueSelectArr1)
					console.log(this.patientActiveArr)
				}
				if(this.activeIndex==5){
					if(this.patientVersion==0){
						if(this.selectArr2.indexOf(null)!=-1){
							Toast('请完整作答后提交')
							return
						}						
					}else{
						if(this.patientActiveArr.length<3){
							Toast('请完整作答后提交')
							return
						}else{
							for(let i=0;i<this.patientActiveArr.length;i++){
								let index=this.selectOptArr[this.questionArrIndex].indexOf(this.patientActiveArr[i]);
								if(index!=-1){
									this.trueSelectArr2.splice(index,1,1);
								}
							}
							for(let k=0;k<this.trueSelectArr2.length;k++){
								let index=this.trueSelectArr2.indexOf(null);
								if(index!=-1){
									this.trueSelectArr2.splice(index,1,0);
								}
							}
							this.patientActiveArr=[];
						}
					}
				}
				if(this.activeIndex<5){
					this.$refs.audio.pause();
					this.activeIndex+=1;
					this.touchVoiceIcon();
				}else{
					this.save()
				}
			},
			async save(){
				if(this.saving==true){
					return
				}
				this.saving=true;
				let params={
					evaluationType:Cookies.get("patientVersion"),
					masterId:Cookies.get("masterId"),
					patientId:Cookies.get("patientId"),
					nuitId:'',
					nuitName:'',
					scaleStatus:1,
					conditionNo1:this.selectOptArr[this.questionArrIndex].join(','),
					conditionNo1S1:this.trueSelectArr1[0],
					conditionNo1S2:this.trueSelectArr1[1],
					conditionNo1S3:this.trueSelectArr1[2],
					conditionNo2:this.monthWeek[0],
					conditionNo3:this.monthWeek[1],
					conditionNo4:this.countArr[this.countArrIndex][0]+'-'+this.countArr[this.countArrIndex][1],
					conditionNo4FirstNum:this.countArr[this.countArrIndex][0],
					conditionNo4SecondNum:this.countArr[this.countArrIndex][1],
					conditionNo4S1:this.counterAnswer[0]?this.counterAnswer[0]:-1,
					conditionNo4S2:this.counterAnswer[1]?this.counterAnswer[1]:-1,
					conditionNo4S3:this.counterAnswer[2]?this.counterAnswer[2]:-1,
					conditionNo4S4:this.counterAnswer[3]?this.counterAnswer[3]:-1,
					conditionNo4S5:this.counterAnswer[4]?this.counterAnswer[4]:-1,
					conditionNo5:this.selectOptArr[this.questionArrIndex].join(','),
					conditionNo5S1:this.trueSelectArr2[0],
					conditionNo5S2:this.trueSelectArr2[1],
					conditionNo5S3:this.trueSelectArr2[2],
					doctorId:Cookies.get('doctorId'),
					doctorName:'',
					createUser:Cookies.get('doctorId'),
					startDate:this.startTime,
					summitDate:new Date().getTime(),
					sort:'',
					source:''
				};
				console.log(params)
				try {
				  let res = await api.mmseSave(params);
				  if (res.code == 1) {
					  // this.$router.push({ path: '/mmse-end' ,query:{route:res.data.nextRoute}});
					//   this.commonApi.nextRoute(res.data.nextRoute)
					// this.$router.replace('/emt')
					this.$router.push({
						path:'/screening',
						query:{id:2,path:'emt'}
					})
				  }else{
					  Toast(res.msg);
					  this.saving=false;
				  }
				} catch (e) {
					this.saving=false;
					console.log(e);
				}
			},
			choseBtn(item,index){
				this.selectArr1.splice(index,1,item);
				if(item==0){
					this.trueSelectArr1.splice(index,1,1);
				}else{
					this.trueSelectArr1.splice(index,1,0);
				}
				console.log(this.trueSelectArr1)
			},
			choseBtn2(item,index){
				this.selectArr2.splice(index,1,item);
				if(item==0){
					this.trueSelectArr2.splice(index,1,1);
				}else{
					this.trueSelectArr2.splice(index,1,0);
				}
				console.log(this.trueSelectArr2)
			},
			patientChoseBtn(item){
				console.log(item)
				let index=this.patientActiveArr.indexOf(item);
				if(index!=-1){
					this.patientActiveArr.splice(index,1);
				}else{
					if(this.patientActiveArr.length<3){
						this.patientActiveArr.splice(this.patientActiveArr.length,1,item);
					}
				}
			},
			choseMonthWeek(item,index){
				if(this.canChose==false){
					return
				}
				this.monthWeek.splice(index,1,item+1);
				this.canChose=false;
				let that=this;
				console.log(this.monthWeek)
				setTimeout(function(){
					that.$refs.audio.pause()
					that.activeIndex+=1;
					that.touchVoiceIcon();
					that.canChose=true;
				},500)
			},
			counterBtn(num){
				if(this.saving==true){
					return;
				}
				console.log(this.showCounter);
				console.log(this.counterInput)
				if(this.counterInput[this.showCounter-1].length<4){
					this.$set(this.counterInput,this.showCounter-1,this.counterInput[this.showCounter-1]+String(num))
				}
				console.log(this.counterInput[this.showCounter-1])
			},
			counterDelBtn(){
				if(this.saving==true){
					return;
				}
				this.$set(this.counterInput,this.showCounter-1,this.counterInput[this.showCounter-1].substring(0,this.counterInput[this.showCounter-1].length-1))
			},
			counterConfirmBtn(){
				if(this.counterInput[this.showCounter-1]==''){
					Toast('请输入答案');
					return;
				}
				if(this.saving==true){
					return;
				}
				let that=this;
				this.counterAnswer.push(this.counterInput[this.showCounter-1]);
				that.showCounter+=1;
				if(that.showCounter<6){
					console.log(that.showCounter)
				}else{
					this.saving=true;
					setTimeout(function(){
						that.$refs.audio.pause()
						that.activeIndex+=1;
						that.touchVoiceIcon();
						// that.totalCounter='再减 '+that.countArr[that.countArrIndex][1]
						that.saving=false;
					},500)
				}
				
			},
			skipBtn(){
				Dialog.confirm({
				  title: '确定跳过此题吗?',
				  message: '跳过后结果将判定为异常'
				}).then(() => {
				  // on confirm
				  this.$refs.audio.pause()
				  this.activeIndex+=1;
				  this.touchVoiceIcon();
				}).catch(() => {
				  // on cancel
				});
			}
		}
	};
</script>

<style scoped>
	.content{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	.patientVersion_MMSE_Box{
		position: absolute;
		top: 35%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	.patientVersion_MMSE_block{
		background-color: #F6F7FC;
		color: #333333;
		font-size: 16px;
		padding: 9px 34px;
		margin: 10px 5px;
		border-radius: 19px;
	}
	.progress{
		background-color: #F6F7FC;
		padding: 7px 15px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.progress_bar{
		width: 300px;
		height: 4px;
		background-color: #ffffff;
	}
	.progress_bar_pb{
		height: 100%;
		background-color: #4174F7;
	}
	.progress_text{
		color: #4174F7;
		font-size: 14px;
		font-weight: 500;
	}
	.main{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.main_l1{
		margin-top: 10px;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.main_tips{
		background-color: #4174F7;
		border-radius: 0px 16px 16px 0px;
		color: #ffffff;
		font-size: 12px;
		padding: 7px 15px;
	}
	.main_tips2{
		background-color: #0EC99A;
	}
	.main_backBtn{
		border: 1px solid #979797;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 16px 0px 0px 16px;
		color: #333333;
		font-size: 12px;
		padding: 7px 15px;
		border-right: none;
	}
	.main_question{
		color: #333333;
		font-size: 20px;
		font-weight: 500;
		padding: 0 24px;
		top: 18%;
		position: absolute;
		box-sizing: border-box;
	}
	.main_question_exp{
		font-size: 14px;
		color: #999999;
		font-weight: 400;
		margin-top: 6px;
	}
	.main_question>span{
		vertical-align: middle;
	}
	.voiceBox{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		position: absolute;
		top: 35%;
	}
	.voiceBox audio{
		position: absolute;
		top: -500px;
		opacity: 0;
	}
	.playBtn{
		margin-top: 54px;
	}
	.playBtn_bg{
		width: 102px;
		height: 102px;
	}
	.playBtn_text{
		text-align: center;
		margin-top: 5px;
		color: #4174F7;
		font-size: 14px;
		font-weight: 400;
	}
	.continueBtn{
		width: 315px;
		background-color: #4174F7;
		border-radius: 22px;
		padding: 8px 0;
		font-size: 16px;
		color: #ffffff;
		text-align: center;
		position: absolute;
		top: 76%;
	}
	.main_reviewBox{
		background-color: #F6F7FC;
		border-radius: 10px;
		padding: 7px;
		box-sizing: border-box;
		width: 315px;
		position: absolute;
		top: 28%;
	}
	.main_reviewBox_title{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		font-size: 14px;
		color: #999999;
	}
	.main_reviewBox_title_l{
		padding: 4px 0;
		text-align: center;
		width: 36%;
	}
	.main_reviewBox_title_r{
		padding: 4px 0;
		text-align: center;
		width: 64%;
	}
	.main_reviewBox_line{
		border-radius: 4px;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		padding: 8px 0;
	}
	.main_reviewBox_line_title{
		padding: 8px 0;
		text-align: center;
		width: 33%;
		color: #333333;
		font-size: 19px;
		font-weight: 500;
		border-right: 1px solid #DEDFE6;
		box-sizing: border-box;
	}
	.main_reviewBox_line_selectBtn{
		margin-left: 10px;
		width: 80px;
		border-radius: 4px;
		background-color: #F6F7FC;
		padding: 10px 0;
		font-size: 16px;
		color: #333333;
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.main_reviewBox_line_selectBtn_point{
		width: 9px;
		height: 9px;
		border: 1px solid #999999;
		box-sizing: border-box;
		border-radius: 50%;
		margin-right: 10px;
	}
	.main_selectBox{
		width: 315px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		position: absolute;
		top: 30%;
	}
	.main_selectBox_btn{
		background-color: #F6F7FC;
		border-radius: 19px;
		font-size: 15px;
		color: #333333;
		padding: 9px;
		width: 75px;
		text-align: center;
		margin-top: 15px;
	}
	.main_question2{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 18px;
		font-weight: 500;
		position: absolute;
		top: 32%;
	}
	.main_question2_count{
		color: #EA3131;
		margin-right: 5px;
	}
	.main_counter{
		position: absolute;
		top: 29%;
	}
	.main_countInput{
		height: 45px;
		box-sizing: border-box;
		margin: 10px;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		border-left: 1px dashed #CCCCCC;
		position: relative;
	}
	.main_countInput_pointBox{
		width: 20px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: absolute;
		margin-left: -10px;
		left: 0;
	}
	.main_countInput_point{
		width: 7px;
		height: 7px;
		background-color: #ffffff;
		border: 3px solid #DDDDDD;
		border-radius: 50%;
	}
	.main_countInput_title{
		font-size: 25px;
		font-weight: 500;
		color: #CCCCCC;
		margin-left: 19px;
		white-space: nowrap;
		text-align: right;
	}
	.main_countInput>input{
		height: 39px;
		width: 183px;
		border: none;
		lighting-color: rgba(0, 0, 0, 0);
		outline: none;
		background-color: rgba(0, 0, 0, 0);
		color: #333333;
		font-size: 15px;
		background-color: #F6F7FC;
		margin-left: 15px;
		border-radius: 5px;
		padding: 0 10px;
		box-sizing: border-box;
	}
	.main_countInput_active>input{
		border: 1px solid #999999;
	}
	.main_countInput_active>.main_countInput_title{
		color: #333333;
	}
	.main_countInput_active .main_countInput_point{
		border: 4px solid #0EC99A;
	}
	.main_countBtnBox{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 19px;
	}
	.main_countBtn,.main_countBtn_delBtn,.main_countBtn_confirmBtn{
		margin-right: 8px;
		width: 50px;
		height: 50px;
		background-color: #F6F7FC;
		border-radius: 5px;
		font-size: 19px;
		color: #333333;
		font-weight: 500;
		box-sizing: border-box;
		border: 1px solid #DDDDDD;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.main_countBtn_delBtn,.main_countBtn_confirmBtn{
		margin-right: 0;
	}
	.main_countBtn_delBtn{
		font-size: 15px;
		color: #333333;
		font-weight: 400;
	}
	.main_countBtn_confirmBtn{
		background-color: #4174F7;
		font-size: 15px;
		color: #ffffff;
	}
	.main_count_skipBtn{
		position: absolute;
		bottom: 18px;
		color: #4174F7;
		border-bottom: 1px solid #4174F7;
		font-size: 14px;
		font-weight: 400;
	}
	.main_reviewBox_line_selectBtn_active{
		background-color: #4174F7;
		color: #ffffff;
	}
	.main_reviewBox_line_selectBtn_active2{
		background-color: #0EC99A;
		color: #ffffff;
	}
	.main_reviewBox_line_selectBtn_active2>.main_reviewBox_line_selectBtn_point{
		background-color: #ffffff;
		border: 1px solid #ffffff;
	}
	.voice_icon{
		width: 23px;
		height: 20px;
		display: inline;
		vertical-align: middle;
		margin-left: 5px;
	}
	.fade-enter-active, .fade-leave-active {
	  transition: opacity .5s;
	}
	.fade-enter, 
	.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
	  opacity: 0;
	}
</style>